<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app" style='border:1px solid red'>
        <!-- 实现路由的展示区域 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/product/1">电器</router-link>
        <router-link to="/product/2">水果</router-link>
        <router-link to="/product/3">家具</router-link>
        <!-- 映射组件的展示区域 -->
        <router-view style='border:1px solid blue'></router-view>
    </div>
</body>
<script>
    // 创建组件
    var index = Vue.component('index', {
        template: `<h2>首页</h2>`
    })
    var product = Vue.component('index', {

        template: `<div >
                        <h2>产品</h2>
                        <h3>{{info}}</h3>
                        <button @click='show'>点击展示当前页面</button>
                        <router-view style='border:1px solid yellow'></router-view>
                   </div>`,
        data() {
            return {
                info: "??",
                // id:''
            }
        },
        watch: {
            '$route'(to, from) {
                var id = this.$route.params.id;
                if (id == 1) {
                    this.info = "这里是电器专卖商场"
                } else if (id == 2) {
                    this.info = "这里是水果专卖商场"
                } else if (id == 3) {
                    this.info = "这里是家具专卖商场"
                }

            }
        },
        mounted() {
            // console.log(this.$route)
            var id = this.$route.params.id;
            if (id == 1) {
                this.info = "这里是电器专卖商场"
            } else if (id == 2) {
                this.info = "这里是水果专卖商场"
            } else if (id == 3) {
                this.info = "这里是家具专卖商场"
            }
        },
        methods: {
            show() {
                var id = this.$route.params.id;
                console.log(this)
                if (id == 1) {
                    this.$router.push({ name: 'dianqi' })
                } else if (id == 2) {
                    this.$router.push({ name: 'shuiguo' })
                } else if (id == 3) {
                    this.$router.push({ name: 'jiaju' })
                }
            }
        }
    })
    var dianqi = Vue.component('dianqi', {
        template: `<h2>这里是电器展示页面</h2>`
    })
    var shuiguo = Vue.component('shuiguo', {
        template: `<h2>这里是水果展示页面</h2>`
    })
    var jiaju = Vue.component('jiaju', {
        template: `<h2>这里是家具展示页面</h2>`
    })
    // 创建路由对象
    var router = new VueRouter({
        // 创建路由配置
        routes: [
            { name: 'index', path: '/index', component: index },
            {
                name: 'product', path: '/product/:id', component: product,
                // 定义嵌套路由
                children: [
                    { name: 'dianqi', path: 'dianqi', component: dianqi },
                    { name: 'shuiguo', path: 'shuiguo', component: shuiguo },
                    { name: 'jiaju', path: 'jiaju', component: jiaju }
                ]
            }
        ]
    })
    var vm = new Vue({
        el: "#app",
        router: router,
        data: {

        }
    })
</script>

</html>